<!--
 * @Description: 
 * @Author: zzj
 * @Date: 2021-10-13 20:21:10
 * @LastEditors: zzj
 * @LastEditTime: 2021-10-13 21:49:16
-->
<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>v3 setup</title>
	<script src="https://unpkg.com/vue@next"></script>
	<script src="https://cdn.bootcdn.net/ajax/libs/qs/6.10.1/qs.min.js"></script>
	<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.js"></script>
	<!-- <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css" />
  <script src="https://unpkg.com/element-plus@1.1.0-beta.20/dist/index.full.js"></script> -->
</head>

<body>
	<div id="app">
		<button @click="loadArticles">刷新</button>
		<ul>
			<li v-for="item in articles.list" :key="item.id">
				{{item.title}}
				<a href="" @click.prevent="delHandler(item)">删除</a>
			</li>
		</ul>
	</div>
	<script type="module">
		// ---------------
		let token = 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1c2VySWQiOiJNalk9Iiwic3ViIjoiYWRtaW4yIiwiaXNzIjoiMDk4ZjZiY2Q0NjIxZDM3M2NhZGU0ZTgzMjYyN2I0ZjYiLCJpYXQiOjE2MzQxMTI5NzUsImF1ZCI6InJlc3RhcGl1c2VyIiwiZXhwIjoxNjM0Mjg1Nzc1LCJuYmYiOjE2MzQxMTI5NzV9.XopxoZio0VjBTvSNIH2TMp9f_yKp9zNfP7gL3I171GI'
		const request = axios.create({
			baseURL: 'http://121.199.29.84:8001',
			timeout: 10000
		});
		request.interceptors.request.use((config) => {
			config.headers.Authorization = token;
			return config;
		})
		// let {a:name} = {a:"terry"}
		request.interceptors.response.use(({ data: resp }) => {
			if (resp.status === 200) {
				return resp;
			}
			return Promise.reject(resp)
		}, (error) => {
			return Promise.reject(error)
		})
		// ---------------
		let ref = Vue.ref;
		let onMounted = Vue.onMounted;

		let app = Vue.createApp({
			data() {
				return {
					msg: "hello vue3",
					params: {
						page: 1,
						pageSize: 10
					}
				}
			},
			methods: {
				delHandler(row) {
					let url = "/article/deleteById"
					let params = { id: row.id }
					request.get(url, { params }).then(resp => {
						alert(resp.message);
						this.loadArticles();
					})
				}
			},
			watch: {
				params: {
					deep: true,
					handler(params) {
						this.loadArticles();
					}
				}
			},
			setup(props) {
				// 初始化 资讯管理 - 资讯初始化
				// 1. 数据
				let articles = ref({ list: [] })
				// 2. 初始化查询
				let loadArticles = async function () {
					let url = "/article/pageQuery"
					let params = {
						page: 1,
						pageSize: 10
					}
					let resp = await request.get(url, { params });
					articles.value = resp.data;
				}
				// 3. 将初始化查询注册到mounted中，等到生命进行到mounted再执行
				onMounted(loadArticles);

				return {
					articles,
					loadArticles
				}
			}
		});
		app.mount('#app')
	</script>
</body>

</html>